<template>
  <div class="goods">
    <!-- 菜单分类 -->
    <div class="menu-wrapper" ref="menuWrapper" >
      <ul>
        <li v-for="(menu,index) in shopList" :key="menu.id"  @click="selectMenu(index,$event)" :class="{'active':currentIndex===index}">
          <i class="hot iconfont icon-fire" v-if="menu.hot"></i>
          <span>{{menu.menu_name}}</span>
        </li>
        <li class="list-padding"></li>
      </ul>
    </div>
    <!-- 菜式 -->
    <div class="foods-wrapper" ref="foodsWrapper">
      <ul>
        <li class="dishes-list" v-for="menu in shopList" :key="menu.id">
          <h1 class="title">{{menu.menu_name}}</h1>
          <div class="foods-list" v-for="dish in menu.dishes" :key="dish.id">
            <div class="foods">
              <div class="foods-img" @click="seeDetails(dish)">
                <img v-lazy="dish.thumbArr[0]" />
                <!-- <img src="../../../assets/images/default.png" /> -->
              </div>
              <div class="foods-mess">
                <div class="name">{{dish.dishes_name}}</div>
                <div class="sales">月售：{{dish.sales}}份</div>
                <div class="more-price">
                  <span class="price">{{(dish.price * dish.discount).toFixed(2)}}</span>
                  <div class="buy">
                    <div class="price-regu" v-if="dish.is_attr == 1" @click="selectSpec(dish)">选规格</div>
                    <shop-control :food="dish" v-else @cartAdd="cartAdd"></shop-control>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="list-padding"></li>
      </ul>
      <div class="foods-list-title" v-if="shopList">{{shopList[currentIndex].menu_name}}</div>
    </div>

    <!-- 选择多规格 -->
    <dish-specs :food="specData"  v-if="seeSpec" @closeSpec="closeSpec"></dish-specs>
  </div>
</template>

<script>
import shopControl from './control';
import dishSpecs from './specs';

import BScroll from 'better-scroll';

export default {
  name: 'foodsList',
  components: {
    shopControl,
    dishSpecs
  },
  props: {
    shopList:Array
  },
  data() {
      return {
        listHeight: [],
        scrollY: 0,
        currentIndex: 0,
        specData: {},
        seeSpec: false,
        goods: this.$store.state.goodsList
      }
  },
  mounted() {
    this.$nextTick(() => {
      this._initScroll()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.foodsScroll.refresh();
      
      if(this.foodsScroll) {
          this.foodsScroll.scrollTo(0,-this.scrollY,0)
      }
      
      
    })
    
  },
  computed: {
    
  },
  
  watch:{
    shopList() {
      this.$nextTick(() => {
          this._calculateHeight();
      })
    }
  },
  methods: {
    _initScroll() {
      // let menuScroll = new BScroll('.menu-wrapper')
      // let foodsScroll = new BScroll('.foods-wrapper')
      this.meunScroll = new BScroll(this.$refs.menuWrapper, {
        click: true
      });

      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        click: true,
        probeType: 3
      });
      this.foodsScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
        //console.log(this.scrollY)
        for (let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i + 1];
          if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
            this.currentIndex = i
            return
          }
        }
      });
    },
    selectMenu(index, event) {
      console.log(index)
      if (!event._constructed) {
        return;
      }
      let foodList = this.$refs.foodsWrapper.getElementsByClassName('dishes-list');
      let height = this.listHeight[index];
      this.foodsScroll.scrollTo(0,-height,0)
      this.currentIndex = index
      this.scrollY = height
      
    },
    //查看食物详情
    selectFood(food, event) {
      if (!event._constructed) {
        return;
      }
      this.selectedFood = food;
      this.$refs.food.show();
    },

    //获取菜式高度列表
    _calculateHeight() {
      let foodList = this.$refs.foodsWrapper.getElementsByClassName('dishes-list');
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < foodList.length; i++) {
        let item = foodList[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }
      console.log(this.listHeight)
    },

    //选择多规格
    selectSpec(dish) {
      this.specData = dish;
      this.seeSpec = true
    },
    //关闭多规格
    closeSpec() {
      this.seeSpec = false
    },

    //菜的数量增加
    cartAdd(e) {
      this.$emit('handleAdd', e);
    },

    //查看菜式详情
    seeDetails(food) {
      console.log(food)
      this.$router.push({name: 'foodDetails',params:{'food':food}})
    }
  }
} 
</script>

<style lang="stylus" scoped>
@import "~styles/common.styl"
  [v-cloak]
   display: none
  .goods
    display: flex
    position: absolute
    top: 0
    bottom: 0
    width: 100%
    overflow: hidden
    .menu-wrapper
      flex: 0 0 80px
      width: 80px
      background: #f3f5f7
      ul
        li
          text-align center
          box-sizing border-box
          padding 0 10px
          position relative
          span 
            display: inline-block;
            padding: 15px 0;
            margin-top: -1px;
            font-size: 13px;
            line-height: 18px;
            vertical-align: -1px;
            word-break: break-word;
          .hot
            position absolute
            top 4px
            right 4px
            font-size 13px
            color #dc0707
          &.active
            background #fff
            color $themeColor
            font-weight bold
            &::before
              content ''
              position absolute
              left 0
              top 0
              bottom 0
              width 0.06rem
              background $themeColor
        .list-padding
          height 1.2rem
    .foods-wrapper
      flex: 1
      background: #fff;
      position relative
      .foods-list-title
        width 100%
        position absolute
        left 0
        top 0
        padding-left: 10px
        height: 26px
        line-height: 26px
        border-left: 2px solid #d9dde1
        font-size: 12px
        color: #666
        background: #f3f5f7
      .list-padding
        height 1.2rem
      .title
        padding-left: 10px
        height: 26px
        line-height: 26px
        border-left: 2px solid #d9dde1
        font-size: 12px
        color: #666
        background: #f3f5f7
      .foods-list
        .foods
          position relative
          display flex
          padding 10px;
          .foods-img
            width 1.5rem
            height 1.5rem
            overflow hidden
            display flex
            justify-content center
            align-items center
            img 
              width 100%;
          .foods-mess
            flex 1
            margin-left 8px
            display flex
            flex-direction column
            justify-content space-between
            .name
              font-size 0.3rem
              font-weight bold
              margin 0.08rem 0
            .sales
              font-size 0.26rem
              color #333
            .more-price
              display flex
              justify-content space-between
              .price
                font-size 0.34rem
                color $fontColor
                font-weight bold
                margin-top 0.08rem
                &::before
                  content '¥'
                  font-size 0.24rem
              .buy
                .price-regu
                  background $themeColor
                  width 1.1rem
                  height 0.44rem
                  border-radius 0.22rem
                  line-height 0.46rem
                  text-align center
                  font-size 0.24rem
                  color #fff

</style>